<template>
  <el-container>
    <el-aside width="auto" class="header-logo tap">
      <img class="logo" src="@/assets/img/logo.png" alt="Logo" />
      <div class="log">成人高考辅导班管理系统</div>
    </el-aside>
    <el-aside width="auto" class="header-logo tap" >
      <div class="title">欢迎 {{this.username}}</div>
      <el-avatar>admin</el-avatar>
      <el-link type="primary" @click="showDialog">更改密码</el-link>
      <el-link type="primary" @click="logout()">退出</el-link>
    </el-aside>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="440px" center>
      <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" >
        <el-form-item prop="oldpwd" label="旧密码">
          <el-col :span="100">
            <el-input maxlength="20" v-model="oldpwd" :placeholder="string" :disabled="!disabled" @blur="checkoldpwd" type="password" prefix-icon="icon-login_user" clearable/>
          </el-col>
          <el-col :span="60">
            <el-button v-if="istrue === 2" type="success" icon="el-icon-check" size="small" circle></el-button>
            <el-button v-else-if="istrue === 1" type="danger" icon="el-icon-close" size="small" circle></el-button>
          </el-col>
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-col :span="100">
            <el-input maxlength="20" v-model="formData.password" placeholder="请输入密码" :disabled="disabled" type="password" prefix-icon="icon-login_pwd" clearable/>
          </el-col>
        </el-form-item>
        <el-form-item prop="checkPassword" label="确认密码">
          <el-col :span="100">
            <el-input maxlength="20" v-model="formData.checkPassword" placeholder="再次输入密码" :disabled="disabled" type="password" prefix-icon="icon-login_pwd" clearable/>
          </el-col>
        </el-form-item>
        <el-form-item >
          <el-button type="primary"  @click="Confirm('formData')" >确定</el-button>
          <el-button  @click="cancel('formData')" >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        activeIndex: "1",
        username: '',
        id: '',
        oldpwd: '',
        dialogFormVisible:false,
        disabled: true,
        istrue: 0,
        string: '请输入旧密码',
        formData:{
          password:'',
          checkPassword:''
        },
        rules: {
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ],
          checkPassword: [
            {required: true,validator: validatePass, trigger: 'blur'}
          ]
        },
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      logout(){
        let role = sessionStorage.getItem("role");
        window.sessionStorage.clear();
        this.$message({
          duration: 1000,
          message: '退出成功',
          type: 'success'
        });
        if(role === '5'|| role === '4'){
          this.$router.replace('/adminlogin')//防止浏览器回退
        }else {
          this.$router.replace('/')//防止浏览器回退
        }
      },
      showDialog(){
        this.dialogFormVisible = true;
        this.oldpwd = '';
        this.istrue = 0;
        this.disabled = true;
        this.$nextTick(()=>{
          this.$refs.formData.resetFields();//清空表单
        })
      },
      checkoldpwd(){
        if(this.oldpwd === sessionStorage.getItem("token")){
          this.istrue = 2;
          this.disabled = false;
          this.string = "密码正确";
        }else if(this.oldpwd === ''){
          this.istrue = 0;
          this.disabled = true;
        }else {
          this.istrue = 1;
          this.disabled = true;
        }
        this.oldpwd = '';
      },
      cancel(dataForm){
        this.$refs[dataForm].resetFields();
        this.dialogFormVisible = false;
      },
      Confirm(formData){
        this.$refs[formData].validate(valid =>{
          if(valid){
            this.$axios
              .get("/updatepwd",{
                params:{
                  id: sessionStorage.getItem("uid"),
                  pwd: this.formData.password
                }
              }).then(res =>{
              if(res.data.code === 200){
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
                sessionStorage.setItem("token",this.formData.password);
              }else {
                this.$message({
                  type: "error",
                  message: "修改失败"
                });
              }
            })
          }
        })
      }
    },
    mounted:function() {
      this.username = sessionStorage.getItem("user");
      this.id = sessionStorage.getItem("uid");
    }
  };
</script>
<style scoped>
  .el-aside {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  section{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  .logo {
    width: 200px;
  }

  .headerLogo,.logo{
    cursor: pointer;
  }
  .el-link {
    margin-left: 20px;
  }
  .title{
    margin-right: 10px;
    font-size: 15px;
    font-style: initial;
    color: #42a5f5;
  }
  .log {
    padding: 0 20px;
    line-height: 56px;
    font-size: 24px;
    font-weight: bold;
    color: rgb(191, 203, 217);
    float: left;
  }

</style>
